<template>
    <!-- 举报组件 -->
    <view v-if="report" class="Box">
        <view class="zzc" v-if="report" @tap="close" />
        <view class="box">
            <!-- 标题 -->
            <view class="report-title">
                <text class="title">举报</text>
                <view class="close" @click="close">
                    <image class="mg" src="@/static/live/guanbi.png" mode="scaleToFill" />
                </view>
            </view>
            <!-- 内容 -->
            <view>
                <text class="yuanyin">举报原因</text>
                <view class="yuanyin-list">
                    <view class="">
                        <picker @change="bindPickerChange" range-key="name" :value="typeIndex" :range="range"
                            style="width: 200rpx;height: 60rpx;display: flex;flex-direction: row;align-items: center;">
                            <view class="flex-center flex-space-between"
                                style="display: flex;flex-direction: row;align-items: center;"><text class="fs-26">{{
                                    typeIndex >=
                                    0 ?
                                    range[typeIndex].name : '请选择举报分类' }}</text>
                                <image style="width: 24rpx;height: 24rpx;" src="@/static/broadcast/arrow-bottom.png"
                                    mode="aspectFit">
                                </image>
                            </view>
                        </picker>
                    </view>
                    <text style="color: #8ACD97;" @tap="cx">重选原因</text>
                </view>
                <view style="display: flex;flex-direction: row; width: 200rpx;align-items: center;">
                    <text style="font-size: 24rpx;margin: 20rpx 0;">举报描述</text>
                    <text style="color: #888888;font-size: 20rpx;margin: 20rpx 0;">( 选填 )</text>
                </view>
                <view
                    style="height: 150rpx; width: 690rpx;;background-color: #F8F8F8;margin: 20rpx 0;color: #000;padding: 30rpx;border-radius: 10rpx;">
                    <input type="text" :focus="false" v-model="value" placeholder="请指出相关内容便于平台判断违规情况"
                        style="font-size: 24rpx;" />
                </view>
                <view style="width: 130rpx;height: 130rpx; background-color: #F8F8F8;
                    display: flex;justify-content: center;align-items: center;border-radius: 10rpx;margin: 30rpx 0;"
                    @tap="chooseImage">
                    <view style="width: 130rpx;height: 130rpx;" v-if="cover">
                        <image style="width: 130rpx;height: 130rpx;" :src="cover" />
                    </view>
                    <view style="width: 40rpx;height: 40rpx;" v-else>
                        <image style="width: 40rpx;height: 40rpx;" src="@/static/live/shangchuan.png" mode="scaleToFill" />
                    </view>
                </view>
                <text style="width: 690rpx;height: 92rpx;line-height: 92rpx;background: linear-gradient(to right, #4fb784, #a4d79f);;color: #fff;
                font-size: 34rpx;position: sticky;bottom: 0rpx;text-align: center;border-radius: 20rpx;"
                    @click="submit">提交</text>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        report: {
            type: Boolean,
            default: false
        },
        'info': {
            type: Object,
            default: {}
        }
    },
    data() {
        return {
            value: '', // 举报内容
            typeList: [], // 举报类型
            cover: '', //举报图片
            range: [],
            typeIndex: -1, //选择的索引
        }
    },
    watch: {
        report: {
            immediate: true,
            handler(newVal) {
                if (newVal) {
                    this.getReportType();
                }
            }
        }
    },
    methods: {
        bindPickerChange: function (e) {
            this.typeIndex = e.detail.value
        },
        close() {
            this.$emit("showTab")
            this.$emit("closeReport")
        },
        // 获取举报类型
        async getReportType() {
            uni.request({
                url: 'http://qcdj.ascetic.top/index.php?i=666&m=longbing_massages_city&s=api/appuser/user/action_type', // 接口地址
                method: 'POST', // 请求方法
                header: {
                    autograph: "8187c2fd865923857d50439e08cc1894"
                },
                success: (res) => {
                    this.range = res.data.data
                },
                fail: (err) => {
                    console.error(err, '举报类型'); // 打印错误信息
                }
            });
        },
        // 提交举报
        async submit() {
            console.log(this.info, '直播间信息');
            uni.request({
                url: 'http://qcdj.ascetic.top/index.php?i=666&m=longbing_massages_city&s=api/appuser/user/action_complain', // 接口地址
                method: 'POST', // 请求方法
                header: {
                    autograph: "8187c2fd865923857d50439e08cc1894"
                },
                data: {
                    live_id: this.info.id,
                    title: this.range[this.typeIndex],
                    content: this.value,
                    pic: this.cover
                },
                success: (res) => {
                    console.log(res, '举报成功'); // 打印响应数据
                    this.close()
                },
                fail: (err) => {
                    console.error(err, '举报失败'); // 打印错误信息
                }
            });
        },
        /**
 * 选取封面
 */
        chooseImage() {
            uni.chooseImage({
                count: 1, //默认9
                sizeType: ['original', 'compressed'],
                sourceType: ['album'],
                success: (res) => {
                    if (res.tempFilePaths.length) {
                        uni.uploadFile({
                            url: 'http://qcdj.ascetic.top/admin/app/wx/uploadFile', //仅为示例，非真实的接口地址
                            filePath: res.tempFilePaths[0],
                            header: {
                                autograph: "351f44ff7f253887f6dec1e3c76b9cb3"
                            },
                            name: 'file',
                            formData: {
                                'user': 'test'
                            },
                            success: (res) => {
                                this.cover = JSON.parse(res.data).data.attachment_path
                            }
                        });
                    }
                }
            });
        },
        cx() {
            this.typeIndex = -1
        }
    }
}
</script>

<style lang="scss" scoped>
// 公共图片样式
.mg {
    width: 40rpx;
    height: 40rpx;
}

.fs-26 {
    font-size: 26rpx;
}

.zzc {
    position: fixed;
    top: 0;
    height: 800rpx;
    width: 750rpx;
}

.Box {
    width: 750px;
    height: 900rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    padding: 30rpx;
    border-radius: 30rpx 0;
}

.box {
    width: 750rpx;
    height: 900rpx;
    font-weight: 400;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

/* 标题 */
.report-title {
    display: flex;
    flex-direction: row;
    width: 700rpx;
    height: 40rpx;
    margin-bottom: 15rpx;
    justify-content: center;
    align-items: center;
}

.title {
    color: #000;
    font-weight: bold;
    width: 600rpx;
    text-align: center;
    font-size: 40rpx;
}

.close {
    width: 40rpx;
    height: 40rpx;
}

/* 内容 */
.yuanyin {
    width: 94rpx;
    height: 40rpx;
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #888888;
}

.yuanyin-list {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 675rpx;
    margin: 30rpx 0;
}
</style>